<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Categories</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <style>
        *{
            cursor: default;
        }
        html{width:100%;
            height:100%}
        body{width:100%;
            height:100%;
            background: url(images/login_bgx.gif) no-repeat;
            background-size:cover;     /*这里设置了背景图片为覆盖，以填满整个容器*/
        }
        .main_list{
            margin-left: 20%;
            margin-top: 10%;
            margin-bottom: 10%;
            font-family: 仿宋;
            font-size:20px;
            font-weight: bold;
        }
        #main_list{
            margin-top: 0%;
        }
        .main_list:hover{
            color:dimgrey;
        }
        .opreate:hover{
            color: #1b6d85;
        }

    </style>
</head>
<body>
<div style="width: 30%;height:100%;float: left">
    <div style="width: 60%;height: 80%;margin-left: 20%;margin-top: 10%;border-right-style:solid;border-right-width:1px;border-right-color:rosybrown ;">
        <div style="padding-top: 20%">
            <ul style="list-style:none; " id="main_list">
                <li class="main_list"><a href="categories.html">分类</a></li>
                <li class="main_list"><a href="articleManage.html">文章</a></li>
                <li class="main_list"><a href="aboutMange.html">关于</a></li>
                <li class="main_list">留言</li>
            </ul>
        </div>
    </div>
</div>
<div style="width: 70%;height:100%;float: right">
    <div style="margin-top: 10%"height:10%>
        <p style="font-weight: 200;font-size: 30px">update Categories</p>
    </div>
    <div style="margin-top: 10%;height:80%;margin-left: 10%;width: 50%">
        <div style="margin-bottom: 50px">
            <form action="/categoriesImg" method="post" enctype="multipart/form-data">
                <div>
                    <lable>Categories Image</lable>
                    <img id="categories_img" src="" alt=""style="width: 100px;height: 100px;margin-left: 30px;margin-bottom: 30px"></br>
                </div>
                <div>
                    <input type="file" name="categories_img"></br>
                    <input type="hidden" name="categories_id" id="categories_id">
                </div>
                <div>
                    <lable style="margin-left: 0">Categories ImageName</lable>
                    <input id="categories_imgName" type="text"style="float: "name="name">
                </div>
                <div>
                    <button type="submit"  id="categoriesImg">submit</button>
                </div>
            </form>
        </div>

        <div  style="height: 100%">
            <div style="width: 100%;height: 20%" >
                <lable>Categories Name</lable>
                <input type="text"id="categories_name" name="categories_name"style="float: right;width: 60%"></br>
            </div>
            <div style="height: 30%;width: 100%">
                <lable>Categories Introduce</lable>
                <textarea type="text"id="categories_introduce" name="categories_introduce"style="float: right;width: 60%;height: 100%"></textarea></br>
            </div>
            <div style="margin-top: 0%"><a id="submit">submit</a></div>
        </div>
    </div>

</div>
</body>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
<script type="application/javascript">
    $(function () {
        mvc.controller.getCategoriesInfo();
        $('#submit').click(function () {

            var categories_name = $("#categories_name").val();
            var categories_introduce = $("#categories_introduce").val();
            var categories_id = $('#categories_id').val();
            mvc.controller.updateCategories(categories_id,categories_name,categories_introduce);
        });
    });
</script>

</html>